<template>
  <el-dialog :title="isEdit ? '修改品牌类型': '新增品牌类型'" :visible.sync="visible" :close-on-click-modal="closeOnClickModal" @open="_handleDialogOpen" @close="_cancel">
    <el-form ref="dataForm" :model="form" :status-icon="true" :rules="formRules" label-width="100px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="上传附件">
        <el-upload
          ref="uploadExcel"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :on-exceed="exceedShow"
          :file-list="fileList"
          :action="fileAtion"
          :auto-upload="true"
          :multiple="true"
          :headers="headers"
          :data="{ returnName: 1 }"
          accept=".mp4"
          class="upload-demo">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">文件大小控制在200M以内</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="_cancel">取 消</el-button>
      <el-button :loading="_loading" size="small" type="primary" @click="_ok">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadApi from '@/api/upload'
import { getToken } from '@/utils/auth'
export default {

  props: {
    closeOnClickModal: {
      type: Boolean,
      default: false
    },

    loading: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      headers: {
        Authorization: getToken()
      },
      fileList: [],
      isEdit: false,
      visible: false,
      form: {},
      options: [],
      formRules: {
        name: [{
          required: true,
          message: '请输入名称'
        }]
      }
    }
  },
  computed: {
    fileAtion() {
      return uploadApi.file()
    },
    '_loading': {
      get() {
        return this.loading
      },

      set(value) {
        this.$emit('update:loading', value)
      }
    }
  },
  created() {
  },
  methods: {
    _formReset() {
      this.form = {
        name: '',
        file: ''
      }
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
      })
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: '警告',
        message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
      })
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      console.log('change')
      console.log(file)
      this.form.file = file.raw
      console.log(this.form.file)
      console.log(fileList)
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
    },
    handlePreview(file) {
      console.log(file)
    },
    handleError(file, fileList) {
      this.$message.error('文件上传失败')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    exceedShow(file, fileList) {
      this.$message.error('每次上传最多100个文件！')
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      console.log(res.data)
      this.fileList = fileList
      if (res.code === 200) {
        this.$message.success(`文件【${file.name}】上传成功`)
        this.form.path = res.data
      } else {
        this.$message.error('文件上传失败')
      }
    },
    uploadFile() {
      this.$refs.uploadExcel.submit()
    },
    handleChange(value) {
      console.log(value)
    },
    _handleDialogOpen() {
      this._formReset()
      this.$emit('open')
    },
    _cancel() {
      this._formReset()
      this.visible = false
      this.isLoading = false
      this.$emit('cancel')
    },

    _ok() {
      const form = this.$refs['dataForm']
      form.validate(valid => {
        if (valid) {
          const formData = JSON.parse(JSON.stringify(this.form))

          this.$emit('ok', formData, this.isEdit)
        }
      })
    },

    show(params, parent) {
      this.fileList = []
      this.visible = true
      this.parentData = parent
      if (params) {
        this.isEdit = true
      } else {
        // pass
        this.isEdit = false
        // this._clear()
      }
    },

    close() {
      this._cancel()
    }
  }
}
</script>
<style lang="css" scoped>
  .icon-sel {
    width: 2.2em;
    height: 2.2em;
    margin-left: 10px;
  }
</style>
